---
id: api-react-search-provider
slug: /search-ui/api/react/search-provider
title: SearchProvider
date: 2022-03-31
tags: ["core"]
---

The `SearchProvider` is a React wrapper around the Headless Core, and makes state and actions available to Search UI
and in a React [Context](https://reactjs.org/docs/context.html), and also via a
[Render Prop](https://reactjs.org/docs/render-props.html).

It looks like this:

```jsx
import { SearchProvider, SearchBox } from "@elastic/react-search-ui";
import AppSearchAPIConnector from "@elastic/search-ui-app-search-connector";

const connector = new AppSearchAPIConnector({
  searchKey: "search-371auk61r2bwqtdzocdgutmg",
  engineName: "search-ui-examples",
  endpointBase: "http://my-app-search-host:3002"
});

const configurationOptions = {
  apiConnector: connector,
  searchQuery: { ... },
  autocompleteQuery: { ... },
  hasA11yNotifications: true,
  a11yNotificationMessages: {
    searchResults: ({ start, end, totalResults, searchTerm }) =>
      `Searching for "${searchTerm}". Showing ${start} to ${end} results out of ${totalResults}.`
  },
  alwaysSearchOnInitialLoad: true
};

const App = () => (
  <SearchProvider config={configurationOptions}>
    <div className="App">
      <SearchBox />
    </div>
  </SearchProvider>
);
```

| option                      | type                                                                                                  | description                                                                                                                                                                                                                 |
| --------------------------- | ----------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `apiConnector`              | APIConnector                                                                                          | Instance of a Connector. See Connectors API section.                                                                                                                                                                        |
| `onSearch`                  | function                                                                                              | You may provide individual handlers instead of a Connector, override individual Connector handlers, or act as middleware to Connector methods. See [Handlers](#handlers) for more information.                              |
| `onAutocomplete`            | function                                                                                              | You may provide individual handlers instead of a Connector, override individual Connector handlers, or act as middleware to Connector methods. See [Handlers](#handlers) for more information.                              |
| `onResultClick`             | function                                                                                              | You may provide individual handlers instead of a Connector, override individual Connector handlers, or act as middleware to Connector methods. See [Handlers](#handlers) for more information.                              |
| `onAutocompleteResultClick` | function                                                                                              | You may provide individual handlers instead of a Connector, override individual Connector handlers, or act as middleware to Connector methods. See [Handlers](#handlers) for more information.                              |
| `autocompleteQuery`         | <DocLink id="api-core-configuration" section="autocomplete-query" text="Autocomplete Query Config" /> | Configuration options for the autocomplete query.                                                                                                                                                                           |
| `debug`                     | Boolean                                                                                               | Trace log actions and state changes. Default is false.                                                                                                                                                                      |
| `initialState`              | Object                                                                                                | Set inital state of Search UI. See [Initial State](#initial-state) for more information.                                                                                                                                    |
| `searchQuery`               | <DocLink id="api-core-configuration" section="autocomplete-query" text="Search Query Config" />       | Configuration options for the main search query.                                                                                                                                                                            |
| `trackUrlState`             | Boolean                                                                                               | By default, [Request State](#request-state) will be synced with the browser url. To turn this off, pass `false`.                                                                                                            |
| `urlPushDebounceLength`     | Integer                                                                                               | The amount of time in milliseconds to debounce/delay updating the browser url after the UI update. This, for example, prevents excessive history entries while a user is still typing in a live search box. Default is 500. |
| `hasA11yNotifications`      | Boolean                                                                                               | Search UI will create a visually hidden live region to announce search results & other actions to screen reader users. This accessibility feature will be turned on by default in our 2.0 release. Default is false.        |
| `a11yNotificationMessages`  | Object                                                                                                | You can override our default screen reader [messages](packages/search-ui/src/A11yNotifications.js#L49) (e.g. for localization), or create your own custom notification, by passing in your own key and message function(s). |
| `alwaysSearchOnInitialLoad` | Boolean                                                                                               | If true, Search UI will always do an initial search, even when no inital Request State is set.                                                                                                                              |

### Context

The "Context" is a flattened object containing, as keys, all <DocLink id="api-core-state" text="State" /> and <DocLink id="api-core-actions" text="Actions" />.

We refer to it as "Context" because it is implemented with a [React Context](https://reactjs.org/docs/context.html).

ex.

```js
{
  resultsPerPage: 10, // Request State
  setResultsPerPage: () => {}, // Action
  current: 1, // Request State
  setCurrent: () => {}, // Action
  error: '', // Response State
  isLoading: false, // Response State
  totalResults: 1000, // Response State
  ...
}
```

### Initial State

This is useful for defaulting a search term, sort, etc.

Example

```js
  initialState: { searchTerm: "test", resultsPerPage: 40 }
```

See <DocLink id="api-core-state" section="RequestState" text="Request State" /> for more properties that can be set in initial state.
